<template>
  <div>
    <el-select
      v-model="selectLabel"
      style="width: 100%"
      placeholder="请选择"
      clearable
      :disabled="disabled"
      @clear="selectClear"
    >
      <el-option class="option-style" :label="selectLabel" :value="selectValue">
        <el-input
          v-model="keyword"
          class="search"
          size="small"
          placeholder="输入关键字进行过滤"
        />
        <el-tree
          ref="tree"
          :data="treeDate"
          :props="treeProps"
          :show-checkbox="showCheckbox"
          :filter-node-method="filterNode"
          :default-expand-all="true"
          :node-key="treeProps.value"
          @node-click="nodeClick"
          @check-change="checkChange"
        />
      </el-option>
    </el-select>
  </div>
</template>
<script lang="ts">
import { Options, Model, Prop, Vue, Watch } from "vue-property-decorator";

@Options({
  name: "SelectTree"
})
export default class SelectTree extends Vue {
  @Prop({ type: Boolean, default: false }) showCheckbox!: boolean;
  private treeClick = null; // 点击样式
  private keyword = ""; // 搜索关键字
  private selectLabel = null; // 下拉框显示名称
  @Model("change") private value?: any;
  private selectValue = null; // 下拉框显示ID
  @Prop({
    type: Array,
    default: function () {
      return [];
    }
  })
  private treeDate!: any[];

  @Prop({
    type: Object,
    default: function () {
      return {
        children: "children",
        label: "NAME",
        value: "CODE"
      };
    }
  })
  private treeProps?: any;

  @Prop({ type: Boolean, default: false }) private disabled!: boolean;

  @Watch("keyword")
  private searchFilter(value: any) {
    const treeRef: any = this.$refs.tree;
    treeRef.filter(value);
  }

  @Watch("value", { immediate: true })
  private valueChange(value: any) {
    if (value) {
      this.$nextTick(() => {
        const treeRef: any = this.$refs.tree;
        treeRef.setCurrentKey(value);
        const obj = treeRef.getCurrentNode();
        this.treeClick = obj.CODE;
        this.selectLabel = obj.NAME;
        this.selectValue = obj.CODE;
      });
    } else {
      this.$nextTick(() => {
        const treeRef: any = this.$refs.tree;
        treeRef.setCurrentKey("");
      });
      this.selectClear();
    }
  }

  @Watch("selectValue")
  private watchValue(value: any) {
    this.$emit("change", value);
  }

  selectClear() {
    this.treeClick = null;
    this.selectLabel = null;
    this.selectValue = null;
  }

  filterNode(value: any, data: any) {
    if (!value) {
      return true;
    }
    return data[this.treeProps.label].indexOf(value) !== -1;
  }

  nodeClick(obj: any, node: any) {
    this.treeClick = obj.CODE;
    this.selectLabel = obj.NAME;
    this.selectValue = obj.CODE;
    console.log(obj, node);
  }

  checkChange(obj: any, node: any) {
    console.log(obj, node);
  }
}
</script>

<style scoped>
.search {
  width: calc(100% - 8px - 0.5rem);
  margin: 0 0.5rem;
}
.option-style {
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.tree-click {
  color: #4d74d6;
  font-weight: 600;
}
:deep(.el-tree-node__content) {
  padding: 0.25rem;
}
:deep(.el-icon-caret-right) {
  font-size: 0;
}
</style>
